Tagged with #instance mode - Processing 2.x and 3.x Forum

Is object creation delayed when managed into a P5js instance?

nemecsek69 — Mon, 07 May 2018 08:48:12 +0000

As my knowledge of JS is extremely limited, I cannot properly describe the issue: it is more a curiosity than a real problem (it took me some time to pinpoint it).

Here I am creating 2 objects, setting the type variable ONLY AFTER calling the object creation. It looks like the object is not created immediately but only in a second time, after the variable has been set, even if the lines order would hint otherwise.

Is this JS or P5.js related? Is this due to hoisting?

I would like, for my own knowledge, to be directed to the proper docs in order to understand what is happening here. Thanks

Converting p5 sketch automatically to instance mode

animatebig — Mon, 30 Apr 2018 08:55:47 +0000

Is there any tool available which lets us convert plain p5 sketch into instance mode automatically? Even if its not there. Is it practically possible to convert it using regular expressions?

convert P5js global mode to instance mode with script

cimenx — Fri, 05 Jan 2018 01:23:15 +0000

Hello, I'm still new to this community.

I have just build p5-global2instance. It's node.js script for converting P5js global mode to instance mode.

Looking for feedback! :smile:

That's script can be the basis for building webpack-loader for p5 sketch.

Variables in p5.js functions

moo — Mon, 16 Apr 2018 09:29:27 +0000

Ok, So I am struggling with finding any information on variables.

the code that works looks like this: Basically its moving the triangle to the left.

  var a, b, c
  var counter

  p.setup = () => {
    p.createCanvas(1600, 200);
    b = 800; a = 800; c = 800
    counter = 0
  }

  function rotation(degrees) {
    p.rotate(p.radians(degrees))
  }

  function triangleLeft() {
      a < 0 ? a = 800 :a = a-2;
      console.log(a)
      p.fill(209, 238, 255);
      p.translate(a, 100);
        p.triangle(0, -50, -50, 0, 0, 50)
  }

  p.draw = () => {
    counterTimer()
    p.background(89, 113, 255);
    p.noStroke();
      triangleLeft()
}

but I want to use the tringleLeft() function a bunch of times, if I try and do:

  function triangleLeft(num) {
      num < 0 ? num = 800 :num = num-2;
      console.log(num)
      p.fill(209, 238, 255);
      p.translate(num, 100);
        p.triangle(0, -50, -50, 0, 0, 50)
  }

  p.draw = () => {
    counterTimer()
    p.background(89, 113, 255);
    p.noStroke();
      triangleLeft(a)
}

it doesn't increase the variable, it just stays at 800.. any ideas?

Two Canvas, problem with positions.

DDv2FF — Thu, 15 Mar 2018 17:42:32 +0000

Hi. I wanted to create more canvas in my page, and I found this.
https://github.com/processing/p5.js/wiki/Instantiation-Cases
And I have two canvas now, but when i pass an argument for the node, it doesn't work. I want to give a canvas to each paragraph. Also, I cant use createElements , position, or parent, etc, into the instances . What is missing ? Or what im doing wrong ?

var mycanvas = function(canvas1){
    canvas1.setup = function(){
        canvas1.createCanvas(500, 500);
        canvas1.background(0);
    };
};

var my2canvas = function(canvas2){
    canvas2.setup = function(){
        canvas2.createCanvas(500, 500);
        canvas2.background(255, 0, 0);
    };
};
new p5(mycanvas, "#fcanvas");
new p5(my2canvas, "#scanvas");

And the Html




    
    
    

    twoCanvas

    
    
    
    

    


First Canvas
Second Canvas

Chrome extensions with gif in canvas

Layzfat — Tue, 12 Dec 2017 13:49:01 +0000

Hi,

I'm follow Shiffman incredible lessons on using P5js with chrome extensions.

In the example of the Canvas sketch with chrome extensions I followed, I wanted to do some more. Add gifs in the canvas overlaying the top layer of the browser viewing.

My attempt was unsuccessful.. The gif doesn't play..

So what did I do. I used this example to import gif in to p5js put it in my sketch.js as this:

console.log('sketch blah');

var s = function(sketch) {
var img; //declare image

sketch.setup = function() {
  document.body.style['userSelect'] = 'none';
  let h = document.body.clientHeight;
  let c = sketch.createCanvas(sketch.windowWidth, h);
  img = sketch.loadImage("https://" + "media.giphy.com/media/xUOxfnlpG1tsYGFI40/giphy.gif");
  c.position(0,0);
  c.style('pointer-events', 'none');
  sketch.clear();
}

sketch.draw = function() {
  console.log('sketch Looping');
  sketch.image(img, 0, 0);
  //sketch.background(0);
  }
};

var myp5 = new p5(s);

My manifest.json looks like this.

  {
    "manifest_version": 2,
    "name": "Agent Extension",
    "version": "0.0002",
    "web_accessible_resources": [
      "gif/*.gif"
    ],
    "content_scripts": [
      {
        "matches": [
            ""
        ],
        "js": ["p5.js","p5.dom.js","p5.gif.js","p5.gif.min.js", "sketch.js"]

      }
    ],
    "background": {
      "scripts": ["background.js"]
    },
    "browser_action": {
      "default_icon": "img.png"
    }
  }

all the files are in the wright place.

I get this error in the browsers console

sketch.js:18 Uncaught ReferenceError: image is not defined
    at sketch.draw (sketch.js:18)
    at p5.redraw (p5.js:50266)
    at p5. (p5.js:44917)
    at p5. (p5.js:44812)
sketch.draw @ sketch.js:18
p5.redraw @ p5.js:50266
(anonymous) @ p5.js:44917
(anonymous) @ p5.js:44812

I did define it, my guess it is not defined for the browsers standards

I want to have a few 'objects' on the canvas and other types of code taking over the content as end goal.

Animating with large datasets

CPG — Mon, 27 Nov 2017 10:51:19 +0000

Hi Everyone!

I have been working with P5 for a while now, but in my current project I'm working with large data sets for the first time. The FPS I'm getting when animating over 2000+ data points is not good, is there a way to improve upon this?

Thanks!

Instance mode over multiple files

ruairidh — Tue, 25 Jul 2017 17:44:00 +0000

Hi,

I'm writing some sketches in p5 using instance mode. Some of them are getting pretty big, so I was wondering if there was any way to move some of the functionality into multiple files. My initial attempt was to move all the mouse event functions into another file, then import it into the main sketch file and call a function to register them:

test.js:

import registerFunctions from './mouseHandler.js';
let sketch = function(p5) {

  var a = 5;

  p5.setup = function() {
    ...
    registerFunctions(p5);
  };

  p5.draw = function() {...};
};

let p5Sketch = new p5(sketch , 'canvas-holder');

mouseHandler.js:

function _mousePressed() {
  console.log(a); // Obviously wont work
}

export default function registerInputFunctions(p5) {

    p5.mousePressed = _mousePressed;
}

My obvious issue is that I can't access the inner variables from test.js, so this method wont be very useful. So is there any way I can split the sketch into multiple files and somehow access the variables in the sketch from each of the other files?

Thanks in advance :)>-

instance mode

jmm — Thu, 13 Jul 2017 22:07:51 +0000

I try mode instance. I'm missing something but what ? Here the code which does not work : https://jsfiddle.net/teL27db8/

If I add function setup() {}, the figures appear : https://jsfiddle.net/e12tbs22/

Thank you for any explanation

Instance Mode Error: Failed to load resource: net::ERR_FILE_NOT_FOUND Auto:1

destinyschilde — Wed, 07 Jun 2017 22:40:57 +0000

This is embarrassing...So here's the problem: I created this very nice nav button for my site; its a p5 sketch. I wanted to add another canvas to that same page and realized that i couldn't. I realized that i needed to use instance mode, so read all about it and after a lot of tinkering i got my button to display. The problem is that i cant click on it and it displays this error:

Failed to load resource: net::ERR_FILE_NOT_FOUND Auto:1

i know its a little bit very messy, but its really simple and im not sure where the issue is. I suspect it has something to do with how im referencing DOM elements, but i cant find any examples of this being done in instance mode.

all this really is is a little div that when clicked, enlarges to fit the screen.

var sketch = function (p) { var link1; var link2; var link3; var canva; var cnv; open=false; p.setup=function() { link1 = p.createA('index.html', 'Who?'); link1.position(0,0); link2 = p.createA('http://p5js.org', 'Projects'); link2.position(0,100); link3 = p.createA('http://p5js.org', 'Games'); link3.position(0,200); link4 = p.createA('http://p5js.org', 'Experiments'); link4.position(0,300); canva = p.select('#navo'); bod = p.select('body'); canva.style('width',"0%"); cnv = p.createCanvas(110,110); /this is just to nest it in a div/ cnv.parent("navo"); link1.parent("inner"); link2.parent("inner"); link3.parent("inner"); link4.parent("inner"); p.colorMode(p.HSB); x=110; speed=0; segmentx=29; segmenty=13; open=false; }; p.draw=function() { p.clear() x=x+speed; if (x>p.windowWidth+1000){ speed=0; } if ((p.mouseX>0)&&(p.mouseX<70)&&(p.mouseY>0)&&(p.mouseY<70)){ p.cursor(p.HAND); }else { p.cursor(p.AUTO); } if (x110){ segmentx=-10; segmenty=-10; open==true; } if (x<110){ x=110; speed=0; segmentx=29; segmenty=13; open=false; desizeit(); } p.noStroke(); p.fill(p.frameCount % 360, 255, 255); p.triangle(0, 0, 0,x, x, 0); p.textAlign(p.CENTER); p.fill(0); p.fill(255); p.rect(segmentx,segmenty, 8,40); p.rect(13,29,40,8); }; p.mouseReleased=function() { if ((p.mouseX>0)&&(p.mouseX<70)&&(p.mouseY>0)&&(p.mouseY<70)&&(p.open==false)){ speed=70; resizeit(); open=true; } if ((p.mouseX>0)&&(p.mouseX<70)&&(p.mouseY>0)&&(p.mouseY<70)&&(x>p.windowWidth+1000)){ speed=-100; } }; p.resizeit=function() { p.resizeCanvas(p.windowWidth, p.windowHeight); canva.style('width',"100%"); bod.style('overflow-y',"hidden"); }; p.desizeit=function() { p.resizeCanvas(110, 110); canva.style('width',"0%"); bod.style('overflow-y',"visible"); }; }; new p5(sketch);

How to trigger programmaticaly the draw method of a sketch in 'instance' mode?

radumir — Mon, 01 May 2017 04:24:28 +0000

Hi!

I just want to use noLoop() in setup and therefore call only once the draw method but I want to update (to draw again) the sketch in some circumstances.

What's the best advice to achieve this?

I saw that in 'instance' mode it is needed a function f(sketch) that inside defines sketch.setup and sketch.draw and returns nothing.

I intend to define inside a function, let's say drawMethod and make the sketch.draw = drawMethod and finally return an object { draw: drawMethod } in order to expose the method to the outside world and be able to be called later.

I'm not sure if this is the recommended way or not.

Kind regards,

Radu Mirescu

Switching logic is not working

blyk — Mon, 27 Mar 2017 14:22:08 +0000

Okay, It may look like this question should be under hardware category but please bear with me, it is not a hardware realted question.

I have been trying to create two canvas using instantiation mode in p5js where when you take an input from sensor, it switches the canvas back-forth and activates one canvas at a time and set the opacity to 50% of other canvas.

I have been using Neurosky mindwave to take eyeblink input from Neurosky EEG sensor and when user blinks the it should activate one canvas and deactivates another one. The sketch works fine when I use mouseIsPressed and switch back-forth but it doesn't work with the sensor. Note: - It switch the canvas but only once and doesn't switch back to previous state when using Neurosky sensor.

I am using this node module for Neurosky - MODULE

**Code - **

    sketch.js // contains two sketches

    var stateTwo, stateOne = true;
    var k = 0;
    // sketch one -----------------------------------

    var first = new p5(firstSketch, "canvasOne");

    function firstSketch(p) {

        p.setup = function() {
            p.createCanvas(400, 250);
        }
        p.draw = function() {
            p.background(255, 10, 100);
            p.fill(255);
            p.ellipse(p.width / 2, p.height / 2, 50, 50);
            if (blink > 30) {
                stateOne = false;
                stateTwo = true;
                console.log(k + " <-- one");
               // k = 0;
                blink = 0;
            }
            if (stateOne) {
                $('#canvasOne').css('opacity', '1');
                $('#canvasTwo').css('opacity', '0.5');
                // console.log("canvas One");
                p.fill(255, 0, 0);
                p.ellipse(p.random(p.width), p.random(p.height), 50, 50);
            }
        }
    }

    // sketch two -----------------------------------

    var second = new p5(secondSketch, "canvasTwo");

    function secondSketch(p) {

        p.setup = function() {
            p.createCanvas(400, 250);
        }
        p.draw = function() {
            p.background(60, 250, 100);
            p.fill(0);
            p.ellipse(p.width / 2, p.height / 2, 50, 50);

            if (blink > 30) {
                stateOne = true;
                stateTwo = false;
                console.log(k + " <-- two");
              //  k = 0;
                blink = 0;
            }

            if (stateTwo) {
                $('#canvasOne').css('opacity', '0.5');
                $('#canvasTwo').css('opacity', '1');
                // console.log("canvas Two");
                p.fill(0, 0, 255);
                p.ellipse(p.random(p.width), p.random(p.height), 50, 50);
            }
        }
    }

HTML

CONNECT.js

             var attention = 0;
             var meditation = 0;
             var blink;
             var poorSignalLevel = 0;

             if ("WebSocket" in window) {
                 console.log("WebSocket is supported by your Browser. Proceed.");
                 // $('#connect-controls').show();
             }

             var ws = new WebSocket("ws://127.0.0.1:8080");
             ws.onopen = function() {
                 console.log('opened connection');
                 ws.send("Hello from websocket client!");
             };

             // whenever websocket server transmit a message, do this stuff
             ws.onmessage = function(evt) {
                 // parse the data (sent as string) into a standard JSON object (much easier to use)
                 var data = JSON.parse(evt.data);
                 // handle "eSense" data
                 if (data.eSense) {
                     $('#brain').css({
                         opacity: 1
                     });
                     attention = data.eSense.attention;
                     meditation = data.eSense.meditation;
                     // brainProgress('#focusProgress', attention);
                     // brainProgress('#medProgress', meditation);
                     $("#focus").text(attention);
                     $("#meditation").text(meditation);
                 }

                 // handle "blinkStrength" data
                 if (data.blinkStrength) {
                     blink = data.blinkStrength;
                     var blinkcol = "white";
                     var eyeVal = map_range(blink, 0, 255, 0, 100);
                     $('#eyeBlinkStrength').text(parseInt(eyeVal));
                     if (blink > 25) {
                         //blinkcol = "rgba(102,211,43,1.0)";
                         k++;   
                         console.log(blink + " " +k);
                     } else blinkcol = "white";
                     $('#eyeBlink').css({
                         width: eyeVal,
                         height: eyeVal,
                         background: blinkcol
                     });
                 } else {
                     blink = 0;
                 }

                 // handle "poorSignal" data
                 if (data.poorSignalLevel != null) {
                     poorSignalLevel = parseInt(data.poorSignalLevel);
                 }
             };

             // when websocket closes connection, do this stuff
             ws.onclose = function() {
                 // websocket is closed.
                 console.log("Connection is closed...");
             };


             function map_range(value, low1, high1, low2, high2) {
                 return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
             }

DOM interfering with Sketch Container

yovendofruta — Wed, 22 Mar 2017 06:11:46 +0000

My goal is to have these sketches centered in the horizontal direction, and one appear first on the page, then the second. Here is my script file. These two sketches in instance mode are identical save the image loaded into each one.

var PH2 = function ( p ) {
    var mic;
    var img;
    var myCanvas;

    p.centerCanvas = function() {
        var x = (p.windowWidth - p.width) / 2;
        myCanvas.position(x, 0);
        }          

    p.preload = function() {
        img = p.loadImage('Sketches/PH2/1.jpg');
        }

    p.setup = function() {
        myCanvas = p.createCanvas(1000, 600);
        mic = new p5.AudioIn()
        mic.start();
        p.centerCanvas();
        }

    p.windowResized = function() {
        p.centerCanvas();
        }            

    p.draw = function() {
        if (p.mouseIsPressed) {
            micLevel = mic.getLevel();
            p.background('#fdfaee');
            p.textFont("Helvetica");
            p.text("do", 500*micLevel+200, 600*micLevel+300);
            p.fill('#f99991');
            }

        else {
            micLevel = mic.getLevel();
            p.background(255);    
            p.image(img, 200*micLevel*50+200, -50*micLevel*50, p.width/1.9, p.height);
            }
        }
    }
myp5 = new p5(PH2, 'PH2Contain');

var PH3 = function ( p ) {
    var mic;
    var img;
    var myCanvas;

    p.centerCanvas = function() {
        var x = (p.windowWidth - p.width) / 2;
        myCanvas.position(x, 0);
        }          

    p.preload = function() {
        img = p.loadImage('Sketches/PH3/2.jpg');
        }

    p.setup = function() {
        myCanvas = p.createCanvas(1000, 600);
        mic = new p5.AudioIn()
        mic.start();
        p.centerCanvas();
        }

    p.windowResized = function() {
        p.centerCanvas();
        }            

    p.draw = function() {
        if (p.mouseIsPressed) {
            micLevel = mic.getLevel();
            p.background('#fdfaee');
            p.textFont("Helvetica");
            p.text("you", 500*micLevel+700, 600*micLevel+300);
            p.fill('#bcf5ee');
            }

        else {
            micLevel = mic.getLevel();
            p.background(255);    
            p.image(img, 300*micLevel*50+200, -100*micLevel*50, p.width/1.9, p.height);
            }
        }
    }
myp5 = new p5(PH3, 'PH3Contain');

Here is my HTML



    
        .
        
        
        
        
        painthead
    
    


hello hello

If I do not include the centering operations the sketches appear correct but are aligned left (and I want them centered). Whenever I include the function to center the sketch I only see the second sketch centered with "hello hello" to the left of it. With this method I am assuming in myCanvas.position(x,y) the y value is relative to the beginning of the div, but this must not be the case?

Instance Mode Trouble Shooting for 2+ Sketches on 1 Webpage

yovendofruta — Sat, 11 Feb 2017 07:04:44 +0000

I am attempting to implement more than one sketch on an html page using instance mode, but keep getting errors thrown at me in the Processing IDE. I am using p5js.

Here is the sketch I am attempting to convert to instance mode.

var img;
  function preload() {
      img = loadImage("https://dl.dropboxusercontent.com/u/55913541/1.jpg");
 }
function setup() {
  var myCanvas = createCanvas(1000, 600);
  myCanvas.parent('1stContain');
  mic = new p5.AudioIn()
  mic.start();
}
function draw() {
  background(255);
  if(mouseIsPressed) {
    micLevel = mic.getLevel();
    var c = color('#f99991');
    var v = color('#fdfaee');
    background(v);
    textFont("Helvetica");
    text("do", 500*micLevel+200, 600*micLevel+300);
    fill(c);
  }
  else {
  micLevel = mic.getLevel();
  image(img, 200*micLevel*50, -50*micLevel*50, img.width/2, img.height/2);
  }
}
`

Here is my attempt 

`
var sketch = function ( p ) {
var img;
  function preload() {
    img = loadImage("https://dl.dropboxusercontent.com/u/55913541/1.jpg");
  }
  p.setup = function() {
    var myCanvas = p.createCanvas(1000, 600);
    myCanvas.parent('1stContain');
    mic = p.new p5.AudioIn()
    mic.start();
}
  p.draw = function() {
    p.background(255);
  if(mouseIsPressed) {
    micLevel = mic.getLevel();
    p.var c = color('#f99991');
    p.var v = color('#fdfaee');
    p.background(v);
    p.textFont("Helvetica");
    p.text("do", 500*micLevel+200, 600*micLevel+300);
    p.fill(c);
  }
  else {
    p.micLevel = mic.getLevel();
    p.image(img, 200*micLevel*50, -50*micLevel*50, img.width/2, img.height/2);
  }
}
}
new p5(sketch);

I keep getting the error "SyntaxError Expected; but found myCanvas" In the long run I am trying to get 10+ sketches running together on one html page. When I try to implement two (using non instance mode) only the second one shows on the page. I can also include my HTML code if that will help.

Function, This and Array

BoJack — Thu, 23 Feb 2017 00:47:11 +0000

Hi, i've a few problems, I want to create a sketch which generate randomly falling triangle. I've already achieve to make one falling triangle, but i don't really understand how array/table works in js, to generate more than one triangle. All my triangles are generate at the same position.

Oh and I'm in instance mode.

var sketch = function (p) {
 var t1,t2,t3,t4,t5,t6,time;
   p.setup = function () {
     p.createCanvas(p.windowWidth, p.windowHeight);
     for(var i=0;i<10;i++){
     generate();
   }
   };
    generate = function () {
     this.t1 = p.random(0,p.windowWidth);
     this.t3 = this.t1+p.random(-150,120);
     this.t5 = this.t1+p.random(-120,150);
     this.t2 = 300;
     this.t4 = p.random(-150,120);
     this.t6 = p.random(-120,150);
     this.time = p.random(0.5,2.5);
     p.print(this.t1);
   }
   p.draw = function () {
   p.background(150);
   for(var i=0;i<10;i++){
     animate();
   }
   };
     animate = function (){
     p.triangle(this.t1,this.t2,this.t3,this.t2+this.t4,this.t5,this.t2+this.t6);
     this.t2+=this.time;
     p.print(this.t1);
     if(this.t2>p.windowHeight){
     generate();
     }
   }
 }
 new p5(sketch, pong);

How to call static p5.Vector methods in instance mode

wigwam — Fri, 27 Jan 2017 23:58:33 +0000

Hi so in instance mode with instance p= new p5(..), I can make a vector v1 = p.createVector() and can then call v1.dist(v2) but I cannot call p5.Vector.dist(v1,v2) nor p.p5.Vector. This may be a general js question but I was wondering how to call p5.Vector functions like angleBetween() or random2D() etc.

Modifying copy of an object without modifying original object

Mysterion — Sun, 01 Jan 2017 08:05:58 +0000

I have two sketches, and in sketch 1, I have an object that is storing all the relevant data in sketch 1. In sketch 2, I would like to make a copy of the object, and make minor modifications. However, making these minor modifications is also changing sketch 1's object. How can I get it to not do this?

Here's a minimal example:

Output I want: The circles in sketch 1 have the same height, while the circles in sketch 2 have different heights

Output I get: Circles in both sketch 1 and 2 have different heights.

var sketch = function(p) {

  p.eyes = new Eyes();
    p.setup = function() {
        p.createCanvas(200,200);
        p.background(255);
    }
    p.draw = function() {
        p.ellipse(p.eyes.left[0], p.eyes.left[1], 10);
        p.ellipse(p.eyes.right[0], p.eyes.right[1],10);
    }
}

var sketch2 = function(p) {

  p.newEyes = main.eyes;
  p.newEyes.left = [10,10];
  p.newEyes.right = [50,50];

    p.setup = function() {
        p.createCanvas(200,200);
        p.background(255);
    }
    p.draw = function() {
        p.ellipse(p.newEyes.left[0], p.newEyes.left[1], 10);
        p.ellipse(p.newEyes.right[0], p.newEyes.right[1],10);
    }  
}

function Eyes() {
    this.left = [10,50];
    this.right = [50,50]; 
}

var main = new p5(sketch, 'canvasDiv'); 
var main2 = new p5(sketch2, 'canvasDiv');

Couple of questions about instance mode

Tsskyx — Thu, 15 Dec 2016 17:20:28 +0000

I don't know how to properly do some stuff. This is how instance mode usually looks like, right?

var sketch = function(p) {

  p.setup = function() {
  };

  p.draw = function() {
  };
};

new p5(sketch);

I see that functions just get rewritten with the constructor function syntax, that is instead of writing function name(), you write object.name = function().

I get that. However, what if I want to write my own function? Do I need to do it with the same syntax? Do I need to include the object. part?

Each right curly bracket is ended with a semicolon - is that a necessity for instance mode?

In the official examples of instance mode, the last line is written like this: var myp5 = new p5(s);, while here it is written like this: new p5(sketch);. So, which one is correct?

How to use p5 without a sketch, with react native

koranlary — Tue, 22 Nov 2016 16:52:26 +0000

I would like to know if it is possible to use the p5 libraries without a sketch. I would like to be able to use p5js with the react native framework to get a p5 project onto a mobile device.

Can this be done?

Putting entire sketch inside a function

sai — Sun, 18 Sep 2016 09:49:32 +0000

I am working on an online artwork generator using the flickr API. For the prototype I want a user to enter a string into an input box and then flickr returns images based on that string that are then overlayed etc to make a new image.

This is my code so far:

Type a word to generate a new image

This all works fine until I try to call the 'createNewImage' function, what could cause this? Thank you in advance.

Instance mode, adding and removing sketches, creating multiple sketches with a loop

Burans — Mon, 05 Sep 2016 18:59:45 +0000

Hi! I really need to clarify some things regarding instance mode. I hope someone here can help.

I have created 3 sketches and I would like to use them as decorative header backgrounds for different pages of a website. The website uses js to pull in content so there is no refresh when user switches between pages - i have to dynamically add and remove corresponding sketches to the header. My idea was to run the sketches in instance mode, assign the necessary sketch to a var - headerBgSketch = new p5(sketch); and run headerBgSketch.remove(); before assigning the next one. For some reason the remove part is not working. I get "Cannot read property 'remove' of undefined". Is this the right way to do something like that?
The landing page of the same site has a slider in header instead of the decorative backgrounds. I am using p5 to color correct the images inside the slider. I am using a loop to create a sketch for each image like this:

$(document).ready(function(){ var imgCount = $('.header-img-cont').length; for(c = 1; c < imgCount+1; c++){

        new p5(function (h) {

            var bgimg;
            var src = $('#header-img-cont-'+c).data('src-v');

            h.preload = function() {
                bgimg = h.loadImage(src);
            }

            h.setup = function() {
                h.createCanvas(headerW, headerH);
                drawImage();
            }

            function drawImage() {
                //Draws the image and does some color correcting. I don't need the draw loop for this. I just need to draw it once.

            }

        }, "header-img-cont-"+c);

    }

});

I seems to be working for now. I am just interested if its the right way to do this.

Any comments will be greatly appreciated! Thanks!

Using createVector() on a class error. what should the right order be?

giorgiomartini — Sun, 14 Aug 2016 18:22:51 +0000

I got this sketch : http://codepen.io/giorgiomartini/pen/oLJyBj?editors=0011 and I want to have a point class, that draws the point using a vector.

But i get an error in the codepen console and it doesnt draw the point on the screen: Did you just try to use p5.js's createVector() function? If so, you may want to move it into your sketch's setup() function

But.. the createVector function is and i think it should stay on my point class...

Any idea where's the problem?

Thanks :)

Problems with namespacing.....

kennyrosenyc — Tue, 05 Jul 2016 20:20:17 +0000

So I created this massive page with 5 sketches and 5 canvases it works fine on my computer but when I uploaded it I got this error "SCRIPT5009: 'p5' is undefined". I don't get it.

Here is the code (no cracks about the complete mess that it is thank you) :

var myp5_1 = new p5(function(a1) {

var time = 0;
var bx = 0;
var tx = 65;
var ty = 295;
var eRa = 255;

a1.preload = function() {
    img1 = a1.loadImage('images/Stuff/banners/Sea/clouds1.png');
    img2 = a1.loadImage('images/Stuff/banners/Sea/clouds2.png');
    img3 = a1.loadImage('images/Stuff/banners/Sea/KRD.png');
    img4 = a1.loadImage('images/Stuff/banners/Sea/skills.png');
}

a1.setup = function() {

    a1.canvas = a1.createCanvas(900, 300);
    a1.canvas.parent("#banner1");
    a1.background(0);
    a1.smooth();

}

a1.mousePressed = function() {

    if (a1.mouseY < a1.height && a1.mouseY > 5 && a1.mouseX < a1.width && a1.mouseX > 5) {

        a1.draw = function() {

            a1.background(75, 100, 127);

            a1.image(img3, tx, 50);

            a1.noStroke();
            a1.fill(75, 100, 127);
            a1.rect(0, 0, a1.width / 2, a1.height)

            var t1 = 0;
            var ty2 = ty;

            while (t1 <= 10) {
                a1.image(img4, 10, ty2);
                t1 = t1 + 1;
                ty2 = ty + 280 * t1;

            }

            var i1 = 0;
            var ix1 = bx;

            while (i1 <= 5) {
                a1.image(img1, ix1, 0);
                i1 = i1 + 1;
                ix1 = bx + 900 * i1;
            }

            var i2 = 0;
            var ix2 = bx;

            while (i2 <= 25) {
                a1.image(img2, ix2, 0);
                i2 = i2 + 1;
                ix2 = bx + 900 * i2;
            }

            a1.noFill();
            var x = 0;
            a1.stroke(0);

            while (x < a1.width) {
                a1.line(x, 200 + 50 * a1.noise(x / 300, time), x, a1.height);
                x = x + 1;
            }

            time = time + 0.02;
            bx = bx - 1;
            tx = tx + 4;

            if (tx >= 450) {
                tx = 450;
                ty = ty - 4;
            }

            if (ty <= -1000) {
                a1.fill(0, eRa);
                a1.rect(0, 0, 900, 300);
                a1.noLoop();
            }

        }

    }

}

});

var myp5_2 = new p5(function(a2) {

var m = 0;
var cs = 0;
ty = 325;
ty2 = -25;

a2.setup = function() {

    a2.canvas = a2.createCanvas(900, 300);
    a2.canvas.parent("#banner2");
    a2.background(255);
    a2.smooth();

}

a2.mousePressed = function() {
    if (a2.mouseY < a2.height && a2.mouseY > 5 && a2.mouseX < a2.width && a2.mouseX > 5) {

        a2.draw = function() {

            if (m < 200) {
                a2.stroke(cs);
                a2.strokeWeight(1);
                a2.noFill();
                a2.ellipse(150 + m * 2, 150, 300 - m * 5, 300 - m * 3.3);
                m = m + 1;
            }

            cs = cs + 1;

            if (m == 200) {
                a2.stroke(100, 0, 0);
                a2.strokeWeight(4);
                a2.fill(255);
                a2.textSize(40);
                a2.textFont('Verdana');
                a2.text("Kenny", 360, ty);
                a2.text("Rose", 495, ty2);
                a2.text("Design", 600, ty);

                if (ty > 150) {
                    ty = ty - 3;
                } else if (ty <= 150) {
                    ty = 150;
                }

                if (ty2 < 150) {
                    ty2 = ty2 + 3;
                } else if (ty >= 150) {
                    ty2 = 150;
                }

            }



        }
    }

}

});

var myp5_3 = new p5(function(a3) {

var r = 0;
var lx = 0;
var ta = 0;

a3.setup = function() {

    a3.canvas = a3.createCanvas(900, 300);
    a3.canvas.parent("#banner3");
    a3.background(127);
    a3.noStroke();
    a3.fill(10, 100);
    a3.rect(675, 50, 225, 300);
    a3.rect(520, 10, 150, 300);
    a3.rect(165, 100, 350, 300);
    a3.rect(0, 25, 160, 300);
    a3.smooth();

}

a3.mousePressed = function() {
    if (a3.mouseY < a3.height && a3.mouseY > 5 && a3.mouseX < a3.width && a3.mouseX > 5) {

        a3.draw = function() {

            var es = a3.random(10, 30);
            a3.fill(255, 0, 0, 25);
            a3.stroke(255, 200, 0, 25);
            a3.strokeWeight(es / 5);
            a3.rotate(r);
            a3.ellipse(40 + r, 0, es, es);
            r = r + 0.2;

            a3.resetMatrix();

            a3.noStroke();
            a3.fill(0, ta);
            a3.textSize(40);
            a3.text("Kenny Rose Design", 450, 100)

            var ly = a3.random(200, 285);
            a3.stroke(12, 50, 12, 75);
            a3.strokeWeight(es / 5);
            a3.line(lx, 300, lx, ly);
            lx = a3.random(0, 900);

            if (r > 675) {
                ta = ta + 1;
            }

            if (r > 910) {
                r = 910;
                a3.fill(127);
                a3.rect(0, 0, 900, 300);
                a3.noLoop();
            }

        }

    }

}

});

var myp5_4 = new p5(function(a4) {

var ex1 = -15;
var ey1 = 200;
var er1 = 0;
var ex2 = 915;
var ey2 = 25;
var ex3 = 900;
var ey3 = 320;
var ex4 = 20;
var ey4 = -10;
var rx1 = 905;
var ry1 = 90;
var ts = 0;


a4.setup = function() {

    a4.canvas = a4.createCanvas(900, 300);
    a4.canvas.parent("#banner4");
    a4.background(50, 25, 0);
    a4.noStroke();
    a4.fill(75, 50, 0);
    a4.rect(20, 20, 860, 260, 10);
    a4.smooth();

}

a4.mousePressed = function() {
    if (a4.mouseY < a4.height && a4.mouseY > 5 && a4.mouseX < a4.width && a4.mouseX > 5) {

        a4.draw = function() {

            a4.stroke(255, 128, 128, ts);
            a4.strokeWeight(1);
            a4.fill(255, 128, 128);
            a4.textSize(53);
            a4.text("Kenny Rose Design", 130, 150)

            a4.noStroke();
            a4.fill(128, 255, 128);
            a4.ellipse(ex4, ey4, 20, 20);
            a4.ellipse(ex4 + 30, ey4, 20, 20);
            a4.ellipse(ex4 + 60, ey4, 20, 20);
            a4.ellipse(ex4 + 90, ey4, 20, 20);

            a4.noStroke();
            a4.fill(255, 255, 128);
            a4.rect(rx1, ry1, 2, 105);

            a4.noStroke();
            a4.noFill();
            a4.ellipse(ex3, ey3, 200, 200);
            a4.noStroke();
            a4.fill(255, 128, 128);
            a4.ellipse(ex3 - 100, ey3, 20, 20);
            a4.fill(255, 255, 128);
            a4.ellipse(ex3 - 120, ey3, 20, 20);
            a4.fill(128, 255, 128);
            a4.ellipse(ex3 - 140, ey3, 20, 20);

            a4.noStroke();
            a4.noFill();
            a4.ellipse(ex2, ey2, 200, 200);
            a4.noStroke();
            a4.fill(255, 128, 128);
            a4.ellipse(ex2, ey2 + 10, 20, 20);
            a4.fill(255, 255, 128);
            a4.ellipse(ex2, ey2 + 30, 20, 20);
            a4.fill(128, 255, 128);
            a4.ellipse(ex2, ey2 + 50, 20, 20);

            a4.translate(ex1, ey1);
            a4.rotate(a4.radians(er1));
            a4.noStroke();
            a4.noFill();
            a4.ellipse(0, 0, 200, 200);
            a4.noStroke();
            a4.fill(255, 128, 128);
            a4.ellipse(0, 10, 20, 20);
            a4.fill(255, 255, 128);
            a4.ellipse(0, 30, 20, 20);
            a4.fill(128, 255, 128);
            a4.ellipse(0, 50, 20, 20);

            a4.resetMatrix();

            if (ex1 > 600) {
                ex1 = 600;
                er1 = er1 - 5;
            }

            if (er1 < -90) {
                er1 = -90;
                ey1 = ey1 - 5;
            }

            ex1 = ex1 + 5;

            if (ex2 < -10) {
                ex2 = -10;
                ey3 = ey3 - 5;
            }

            ex2 = ex2 - 5;

            if (ey3 < -20) {
                ey3 = -20;
                ey4 = ey4 + 30;
            }

            if (ey4 > 310) {
                ey4 = 310;
                rx1 = rx1 - 4;
                ts = ts + 1;
            }

            if (rx1 < 635) {
                rx1 = 635;
            }

        }
    }
}

});

multiple canvases on one page

allonestring — Sun, 26 Jun 2016 08:23:53 +0000

I can't get more than one sketch to run on a webpage. Each works fine when it's on its own. I have in the sketches

var c1 = createCanvas(200, 200);
c1.parent('firstcanvas');

and

var c2 = createCanvas(300, 300);
c2.parent('secondcanvas');

and, in the html

Inspect shows

and the webpage just shows the first sketch. I've tried various combos of div and canvas, with no luck.

and

with no luck. If I put ordinary javascript animations on the page, as long as I target the right canvas id, they work fine together. Any ideas?

Using instance mode to create multiple sketches on the same page

blindfish — Mon, 27 Jun 2016 21:59:26 +0000

Since this question crops up regularly I figured I'd write a separate post with a clear title so hopefully it will be easy to find...

To understand instance mode you have to understand what's happening inside p5 when you invoke it. The official example passes a callback function named 'sketch' to the p5 constructor:

var myp5 = new p5(sketch);

Here's a simplified representation of what p5 does with that callback:

// a pseudo class:
var iamP5 = function(callback) {

    this.name = "P5 impostor";
    this.someProperty = "foo";

    // *** pass a reference to the newly created object into the callback ***
    callback(this);
};

// pseudo-class method:
iamP5.prototype.sayName = function() {
    console.info(this.name);
};

// instantiate the pseudo-class passing it our callback function
new iamP5 (sketch);


// the callback being passed to foo.  Could equally be 
// a directly passed anonymous function
function sketch(input) {
  // Here 'input' is the 'this' being passed to callback() in iamP5's 'constructor'.
  // It therefore acts as a reference to the instance of foo created above.
  // Any property or method exposed by foo can be accessed via this variable.
  // If you need to reference it a lot you might choose a shorter variable 
  // name such as 'p'; which is what is generally recommended with p5...
  console.info(input.someProperty);
  input.sayName();

  // if they aren't protected you can override properties 
  // and methods of the instantiated object (see notes below)
  input.sayName = function() {
      console.log("I am a robot");
  }
  input.sayName();
}

It's obviously significantly more complex than that in reality but I think that's enough to explain the code structure... The ability to override or add properties and methods to the instance of p5 is important for two reasons:

it allows us to pass p5 our own customised setup(); draw() and other functions
it is otherwise very risky to add your own properties or method to the variable referencing p5 (commonly 'p'). The whole point of using instance mode is to protect the global scope (so that, for example, your global variables won't clash with p5 variables). If you start attaching properties/methods to the p5 reference you again risk name clashes.

It's worth mentioning that the ability to pass a function as a parameter to another function - as demonstrated above - is one of the features that makes JS such a powerful and flexible language. It's also a feature that, if not applied carefully, can lead to brittle, hard to maintain code ;)

This post is intended to be helpful to people unfamiliar with instance mode. Feedback is most welcome.

placing slider relative to canvas in instance mode

aatish — Thu, 09 Jun 2016 21:00:29 +0000

I'm trying to place a slider in a p5 sketch running in instance mode. However, the slider position is calculated relative to the html page, and not relative to the origin of the canvas. So for example if the canvas is in a different location, the slider won't move with it.

How can I place the slider relative to the canvas? (i.e. in a manner similar to other p5 objects, like images, etc.)

Here's my test code:

var testslider = function(p){

    var slider;

    p.setup = function() {
      p.createCanvas(400, 400);
      p.background(200);
      slider = p.createSlider(0, 255, 100);
      slider.position(0, 20);
    }

    p.draw = function() {
    }

}

Thanks!